<template>
  <div id="btgame">
      <div class="h-placeholder"></div>
      <!-- 红包 -->
      <router-link to="/redEnvelope" tag="div" class="redEnvelope"></router-link>
      <!-- banner -->
      <slider v-if="slider.length">
        <swiper-slide v-for="item in slider" :key="item.id">
            <img :src="item.image_url" @click="goDetail(item.game_id)">
        </swiper-slide>
      </slider>
      <!-- 精品BT游戏 -->
      <div class="app-list" v-if="appList.length">
         <div class="app-list-title">
           <h3>
             精品BT游戏<i class="icon-hot"></i>
           </h3>
         </div>
         <div class="app-list-wrap">
           <ul class="list">
             <li class="item" v-for="(item,index) in appList" :key='index' @click="goDetail(item.id)">
                <div class="img">
                  <img v-lazy="item.game_icon">
                </div>
                <p class="name">{{item.gamename}}</p>
                <p class="type">{{item.game_type}}</p>
                <p class="special" v-if="item.welfare[2]">{{item.welfare[2].name}}</p>
             </li>
             <li class="right-range"></li>
           </ul>
         </div>
	    </div>
      <!-- 游戏列表 -->
      <div class="game-hot game-list">
        <div class="game-list-wrap">
          <div class="tab">
             <ul>
               <li :class="{active:tabActive==0}" @click="tabClick(0)">
                  热门新游
               </li>
               <li :class="{active:tabActive==1}" @click="tabClick(1)">
                 最新上架
               </li>
               <li :class="{active:tabActive==2}" @click="tabClick(2)" v-if="preheat.length">
                 新游预热
               </li>
             </ul>
          </div>
          <div class="item" v-for="(item,index) in listTab" :key="index"  @click="goDetail(item.id)">
            <div class="avator">
               <img v-lazy="item.game_icon" alt="" v-if="item.game_icon" :key="item.game_icon">
            </div>
            <div class="info">
              <div class="desc">
                <div class="game_msg">
                  <div class="name">
                    {{item.gamename}}  
                    <span class="icon_hb" v-if="item.is_red"></span>
                  </div>
                  <div class="type">{{item.game_type}}</div>
                </div>
                <div class="label clearfix">
                     <span v-for="(label,index) in item.welfare" :key="index" :style="{background:label.color}">{{label.name}}</span>
                    <!-- <span v-for="(label,index) in item.welfare" :key="index" :style="{background:label.color}">{{label.name | labelFilter }}</span> -->
                </div>
              </div>
              <div class="down">
                 <span>申请返利</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 开服表 -->
      <div class="game-choice">
         <div class="choice-link">
           <router-link to="/server" tag="a" class="server"></router-link>
           <a href="javascript:;" class="gameHall" @click="togameHall()"></a>
           <router-link to="/rank" tag="a" class="rank"></router-link>
         </div>
      </div>
      <!-- 热门游戏 -->
      <scroll class="more-list" ref="scroll" 
        :data="hotgame" 
        :scrollY="scrollY" 
        :scrollX="scrollX"
        :bounce="bounce" 
        :pullup="pullup" 
        @scrollToEnd="_getMoreList">
          <div class="game-list">
            <div class="game-list-wrap">
              <div class="list-wrap" v-for="(item,index) in hotgame" :key="index">
                <!-- 第一类 -->
                <div class="item item-type1" v-if="item.type == 1"  @click="goDetail(item.id)">
                  <div class="avator">
                    <img v-lazy="item.game_icon" alt="">
                  </div>
                  <div class="info">
                    <div class="desc">
                      <div class="game_msg">
                        <div class="name">
                          {{item.gamename}}
                          <span class="icon_hb" v-if="item.is_red"></span>
                        </div>
                        <div class="type">{{item.game_type}}</div>
                      </div>
                      <div class="label clearfix">
                          <!-- <span v-for="(label,index) in item.welfare" :key="index" :style="{background:label.color}">{{label.name | labelFilter }}</span> -->
                          <span v-for="(label,index) in item.welfare" :key="index" :style="{background:label.color}">{{label.name}}</span>
                      </div>
                    </div>
                    <div class="down">
                       <span>申请返利</span>
                    </div>
                  </div>
                </div>
                <div class="item-type2" v-if="item.type == 2"  @click="goDetail(item.id)">
                  
                  <!-- <img :src="item.game_image" alt=""> -->

                   <img v-lazy="{src:item.game_image, loading:defaultImg}" alt="">
                  <p>
                    <i>小编推荐</i>
                    <span>{{item.publicity}}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
      </scroll>
      <!-- 游戏分类 -->
      <div class="game-type" v-show="!more">
        <div class="game-type-title">
          <h3>更多好玩游戏.分类查找</h3>
          <span class="all-type" @click="togameHall">全部分类</span>
        </div>
        <div class="game-type-list">
           <ul class="clearfix">
             <li v-for="(item,index) in Category" :key=item.id @click="togameHall(item.id,index)">{{item.name}}</li>
           </ul>
        </div>
      </div>
      <!-- 下拉加载显示 -->
      <div class="loadlist">
          <loadinglist :row="row" :title="loadTitle" :more="more"></loadinglist>
      </div>
      <!-- 初始化页面加载动画 -->
      <div class="loading-wrap" v-if="initLoading">
        <loading></loading>
      </div>
      <!-- 发起请求动画 -->
      <requestLoading v-show="requestLoading"></requestLoading>
      <!-- 弹出框 -->
       <van-popup v-model="show" class="alertModel" v-if="activity.exist==1" @click-overlay="closeAlertModel">
           <div class="popupContent" v-show="isReceive">
              <img :src="activity.img_url" alt="" class="giftImg" @click="pageTrans(activity.type)">
              <span class="close" @click="closeAlertModel"></span>
           </div>
           <div class="modelDetail" v-show="!isReceive">
              <div class="btn" @click="toUse"></div>
              <i class="icon iconfont" @click="closeAlertModel">&#xe60e;</i>
           </div>
       </van-popup>
  </div>
</template>

<script>
import { swiperSlide } from "vue-awesome-swiper";
import slider from "common/slider.vue";
import Loading from "common/loading";
import Loadinglist from "common/LoadingList";
import requestLoading from 'common/requestLoading'
import Scroll from "common/scroll";
import {getBanner,gameList,gameCategory,getActivity,getGift} from 'api/game_box';
import { mapState} from 'vuex'
export default {
  name: "btgame",
  data() {
    return {

      defaultImg:require('../../assets/image/advertDefault.png'),
      row: true,     //loading文字水平显示
      tabActive: 0,  //游戏切换
      requestLoading:false,
      loadTitle: "正在载入，请稍后...", //设置加载文字
      slider: [],    //banner内容
      appList: [],   //bt内容
      listTab:[],    //游戏内容
      hotnew:[],     //热门新游内容
      shelves:[],    //最新上架内容
      preheat:[],    //新游预热
      hotgame:[],    //热门游戏内容
      isload: false, //是否正在加载
      scrollY: true,  //垂直滚动
      scrollX: false, //水平滚动
      pullup: true,   //上拉加载
      beforeScroll: true,
      bounce: false,  //动画
      more:true,      //下拉加载是否还有更多
      page: 1,        //初始化下拉加载页数
      Category:[],     //游戏分类
      initload:true,
      pageSize:5,     //热门新游最新上架默认5条
      initLoading:true, //初始化动画加载
      show:false,
      activity:[],
      isReceive:true
    };
  },
  filters:{
      labelFilter(text){
          return text.substr(0,8);
      }
  },
  created() {
    this.init();
  },
  activated(){
    if(this.activity.exist==1&&!sessionStorage.getItem('storge')){
      this.show=true;
      sessionStorage.setItem('storge','true')
    }
  },
  methods: {
    init(){
      //获取banner
      getBanner(2).then(res=>{
         if(res.data.error==0){
           this.slider=res.data.content;
         }
      });
      //精品BT游戏
      gameList(3,this.page,"","","","").then(res=>{
         if(res.data.error==0){
           this.appList=res.data.content.data;
         }
      });
      //热门新游
      gameList(4,"","","",this.pageSize,3).then(res=>{
         if(res.data.error==0){
           this.hotnew=res.data.content.data;
           this.listTab=this.hotnew;
         }
      });
      //新游预热
       gameList(6,"","","",this.pageSize,3).then(res=>{
          if(res.data.error==0){
            this.preheat=res.data.content.data;
          }
      });
      //热门游戏
      gameList(1,this.page,"","","",3).then(res=>{
         if(res.data.error==0){
           let totalPage=res.data.content.totalPage;
           this.hotgame=res.data.content.data;
           this.initLoading=false;
           if(this.page==totalPage){
              this.more = false;
              this.isload = true;
            }
         }else{
           this.initLoading=false;
         }
      });
      //游戏分类
      gameCategory().then(res=>{
        if(res.data.error==0){
           this.Category=res.data.content;
        }
      })
      //活动
      getActivity().then(res=>{
          if(res.data.error==0){
            this.activity=res.data.content;
              setTimeout(()=>{
              this.$nextTick(()=>{
                if(this.activity.exist==1){
                    if(!sessionStorage.getItem('storge')){
                      this.show=true;
                      sessionStorage.setItem('storge','true')
                  }
                }
              })
            },1000)
          }
      })
    },
    goDetail(id) {
      if(id==0){
        return
      }
      if(id==41){
        window.location.href="http://h5.17byh.com/h5box/h5box.html";
        return;
      }
      this.$router.push({
        path: `/gameDetail/${id}`
      });
    },
    togameHall(id,index){
      if(id,index){
         this.$router.push({
          path: `/gameHall/${id}/${index}`
        });
      }else{
        this.$router.push({
          path: '/gameHall/1/0'
        });
      }
     
    },
    tabClick(index) { 
      //最新上架
      if(index==1){
        this.tabActive=1;
        if(this.shelves.length==0){
          this.requestLoading=true;
          gameList(2,"","","",this.pageSize,3).then(res=>{
            if(res.data.error==0){
              this.shelves=res.data.content.data;
              this.listTab=this.shelves;
              this.requestLoading=false;
            }
          });
        }else{
          this.listTab=this.shelves;
        }
      }else if(index==2){
           this.tabActive=2;
            if(this.preheat.length==0){
              this.requestLoading=true;
              gameList(6,"","","",this.pageSize,3).then(res=>{
                if(res.data.error==0){
                  this.preheat=res.data.content.data;
                  this.listTab=this.preheat;
                  this.requestLoading=false;
                }
              });
            }else{
              this.listTab=this.preheat;
            }
      }
      else if(index==0){
        this.tabActive=0;
        this.listTab=this.hotnew;
      }
    },
    _getMoreList() {
      if (this.isload == true) {
        return;
      }
      this.page++;
      this.isload = true;
      gameList(1,this.page,"","","",3)
        .then(res => {
          if (res.data.error == 0) {
            let totalPage=res.data.content.totalPage;
            res = res.data.content.data;
            this.isload = false;
            this.hotgame = this.hotgame.concat(res);
            if(this.page==totalPage){
              this.more = false;
              this.isload = true;
            }
          }
        })
    },
    closeAlertModel(){
      this.show=false;
      sessionStorage.setItem('storge','true')
    },
    pageTrans(type){
      if(type==1){
        // this.$router.push({
        //   path:'/userFriend'
        // })
      }else if(type==2){
        getGift(type).then(res=>{
            if(res.data.error!=0){
               sessionStorage.removeItem('storge');
            }
            if(res.data.error==100){
              let mobile=this.loginInfo.mobile;
              if(!mobile){
                this.$router.push({
                   path:'/bindPhone'
                 })  
              }
            }
            if(res.data.error==0){
                this.isReceive=false;
            }
        })
      }
    },
    toUse(){
       this.$router.push({
          path:'/userMoney'
        })
    }
  },
  mounted(){
    
  },
  computed:{
     ...mapState(['loginInfo'])
  },
  components: {
    slider,
    swiperSlide,
    Loading,
    Scroll,
    Loadinglist,
    requestLoading
  }
};
</script>


<style scoped lang="scss">
@import "~styles/mixins.scss";
@import "~styles/variable.scss";
.loading-wrap {
  z-index: 1000;
}
.h-placeholder {
  width: 100%;
  height: 1.54rem;
}
.alertModel{
  background:transparent;
  .popupContent{
    position:relative;
    .button{
      position: absolute;
      width: 3.04rem;
      height: .87rem;
      @include bg-image("../../assets/image/model_button");
      background-size: 100% 100%;
      bottom: 2.4rem;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .modelDetail{
    position: relative;
    width:5.47rem;
    height:9.18rem;
    @include bg-image("../../assets/image/pic_redenvelopes");
    background-size:100% 100%;
    .icon{
        position: absolute;
        font-size: 0.5rem;
        top: 0.7rem;
        right: 0.1rem;
        color: #a44026;
    }
    .btn{
      position:absolute;
      left:50%;
      transform: translateX(-50%);
      width:3.85rem;
      height:.8rem;
      bottom:2.4rem;
      @include bg-image("../../assets/image/use_button");
      background-size:100% 100%;
    }
  }
  .giftImg{
    width:6.3rem;
    height:8.65rem;
  }
  .close{
     margin:.3rem auto;
     display: block;
     width:.8rem;
     height:.8rem;
     @include bg-image("../../assets/image/delete");
     background-size:100% 100%;
  }
}
.redEnvelope{
  position:fixed;
  z-index:999;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 2.8rem;
  width:1.7rem;
  height:1.82rem;
  @include bg-image('../../assets/image/hb_img');
  background-size:100% 100%;
  background-repeat: no-repeat;
}
.swiper-container {
  height: 3rem;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  .swiper-wrapper {
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.app-list {
  height:3.8rem;
  margin-top: 0.22rem;
  background: #fff;
  .app-list-title {
    position: relative;
    padding-left: 0.4rem;
    h3 {
      font-size: 0.32rem;
      color: $color-text;
      .icon-hot {
        display: inline-block;
        width: 0.32rem;
        height: 0.38rem;
        margin-left: 0.18rem;
        background-size: 0.32rem 0.38rem;
        background-repeat: no-repeat;
        @include bg-image("../../assets/image/icon_hot");
      }
    }
  }
  .app-list-wrap {
    margin-top: 0.26rem;
    width: 100%;
    overflow: scroll;
    ul{
      width:10000px;
    }
    .item {
      float:left;
      width: 1.6rem;
      margin: 0 0.18rem 0 0.34rem;
      white-space: nowrap;
      font-size: 12px;
      img {
        width: 1.6rem;
        height: 1.6rem;
      }
      .name {
        font-size: 0.28rem;
        margin-top: 0.1rem;
        color: $color-text;
        @include ellipsis();
      }
      .type {
        font-size: 0.24rem;
        color: #8f8e94;
        height:.32rem;
        @include ellipsis();
      }
      .special {
        margin-top: 0.2rem;
        width: 100%;
        height: 0.48rem;
        line-height: 0.48rem;
        font-size: 0.24rem;
        text-align: center;
        background: #facd3b;
        color: #fff;
        border-radius: 0.24rem;
        @include ellipsis();
      }
    }
    .right-range{
      float:left;
      width:0.24rem;
      height:0.1rem;
    }
  }
}
.game-hot {
  padding: 0 0.4rem;
  margin-top: 0.2rem;
}
.game-list {
  .game-list-wrap {
    width: 100%;
    border-top: 1px solid #f2f2f2;
    .tab {
      margin: 0.1rem 0;
      margin-top:0.2rem;
      ul {
        display: flex;
        li {
          width: 1.7rem;
          height: 0.5rem;
          line-height: 0.5rem;
          margin-right: 0.26rem;
          text-align: center;
          font-size: 0.3rem;
          color: $color-text;
          border: 1px solid #4d555a;
          border-radius: 0.25rem;
          &.active {
            color: $color-focus;
            border-color: $color-focus;
          }
        }
      }
    }
    .item {
      display: flex;
      min-height: 1.75rem;
      margin-top: 0.22rem;
      .avator {
        width: 1.6rem;
        height: 1.6rem;
        img {
          width: 1.6rem;
          height: 1.6rem;
        }
      }
      .info {
        flex: 1;
        margin-left: 0.16rem;
        display: flex;
        justify-content: space-between;
        padding-bottom: 0.22rem;
        border-bottom: 1px solid #f2f2f2;
        .desc {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .name{
            font-size:$font-size-m;
          }
          .type {
            color: #8e8d93;
          }
          .label{
            margin-top:0.1rem;
            span{
              float: left;
              padding: 0.02rem 0.1rem;
              color: #fff;
              margin: 0.02rem;
              border-radius: 4px;
              font-size:9px;
            }
          }
        }
        .down {
          margin-top:0.2rem;
          width: 1.2rem;
          height: 1.2rem;
          font-size: 0.3rem;
          color: $color-block;
          border: 1px solid $color-block;
          border-radius: 0.6rem;
          display:flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          span{
            width: .8rem;
          }
        }
      }
      &.item-type1{
        padding: 0 0.4rem;
      }
    }
    .list-wrap{
      .item-type2{
        position:relative;
        top:-1px;
        background:#fff;
        z-index:99;
        padding:0.2rem 0;
        border-bottom:1px solid #f2f2f2;
        p{
          margin-top:0.12rem;
          display:flex;
          align-items: center;
          padding: 0 0.4rem;
          i{
            display: inline-block;
            margin-right:0.2rem;
            height: 0.45rem;
            line-height: 0.45rem;
            padding: 0 0.1rem;
            color: $color-focus;
            border: 1px solid $color-focus;
            border-radius: 3px;
          }
          span{
            flex:1;
            @include ellipsis();
          }
        }
        img{
          width:100%;
          height:2.7rem;
        }
      }
      &:last-child{
        .info{
          border:none;
        }
      }
    }
  }
}
.more-list{
  .game-list-wrap{
    border:none;
  }
  .game-hot{
    margin-top:0;
  }
}
.game-hot{
  .item{
     &:last-child .info {
        border: none;
      }
  }
}
.game-choice {
  padding: 0 0.4rem;
  .choice-link {
    display: flex;
    justify-content: space-between;
    padding: 0.28rem 0;
    border-top: 1px solid #f2f2f2;
    border-bottom:1px solid #f2f2f2;
  }
  a {
    flex: 1;
    height: 1.28rem;
    background-size: 100% 100%;
    &.gameHall {
      margin:0 .1rem;
      @include bg-image("../../assets/image/btn_game");
    }
    &.server {
      @include bg-image("../../assets/image/btn_kfb");
    }
    &.rank{
       @include bg-image("../../assets/image/btn_rank");
    }
  }
}
.game-type{
  padding:0 0.4rem;
  .game-type-title{
    display:flex;
    padding-top:0.2rem;
    border-top:1px solid #f2f2f2;
    justify-content: space-between;
    h3{
      font-size: 0.32rem;
      color: #4d555a;
    }
    .all-type{
      padding:0.1rem 0.2rem;
      border:1px solid $color-focus;
      color: $color-focus;
      border-radius:0.3rem;
    }
  }
  .game-type-list{
    margin-top:0.3rem;
    padding-bottom:0.3rem;
    ul{
      width:102%;
      li{
        float:left;
        width:1.2rem;
        margin:0 0.16rem 0.1rem 0;
        height:0.5rem;
        line-height:0.5rem;
        text-align:center;
        border:1px solid $color-focus;
        color:$color-focus;
        border-radius:3px;
      }
    }
  }
}
.request-loading{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.icon_hb{
      display:inline-block;
      vertical-align: top;
      margin-top:.03rem;
      width:.82rem;
      height:.3rem;
      @include bg-image('../../assets/image/s_hb');
      background-size:100% 100%;
      background-repeat: no-repeat;
}
</style>
